    <style include="cr-shared-style">
      #container {
        /* Add margin at the bottom of the list. Note that there is no margin
         * to the window boundary when the list scrolls. */
        border-bottom: 40px transparent solid;
      }

      :host {
        display: inline-block;
        margin-top: -6px;
      }

      img {
        border-radius: 50%;
        height: 64px;
        margin: 6px;
        vertical-align: top;
        width: 64px;
      }

      img.iron-selected {
        border: 2px solid rgba(66, 133, 244, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17);
        margin: 4px;
        outline: none;
      }

      img:focus {
        outline: 1px solid rgba(66, 133, 244, 0.6);
      }

      iron-icon {
        --iron-icon-fill-color: var(--google-grey-500);
        --iron-icon-height: 24px;
        --iron-icon-width: 24px;
        background-color: rgb(237, 237, 237);
        border: 0;
        border-radius: 50%;
        margin: 6px;
        padding: 20px;
        position: static;
      }

      iron-icon.iron-selected {
        border: 2px solid rgba(66, 133, 244, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17);
        margin: 4px;
        outline: none;
      }

      iron-icon:focus {
        outline: 1px solid rgba(66, 133, 244, 0.6);
      }
    </style>

    <div id="container">
      <iron-a11y-keys keys="up down left right space enter"
          on-keys-pressed="onKeysPressed">
      </iron-a11y-keys>
      <iron-selector id="selector"
          on-iron-activate="onIronActivate_" on-iron-select="onIronSelect_"
          on-selected-item-changed="onSelectedItemChanged_"
          selected-item="{{selectedItem}}" role="radiogroup">
        <!-- Selects the camera as the picture source. -->
        <iron-icon id="cameraImage" role="radio"
            data-type$="[[selectionTypesEnum_.CAMERA]]"
            icon="cr:camera-alt" title="[[takePhotoLabel]]"
            hidden="[[!cameraPresent]]">
        </iron-icon>
        <template is="dom-if" if="[[chooseFileLabel]]">
          <!-- Selects the file picker as the picture source. -->
          <iron-icon data-type$="[[selectionTypesEnum_.FILE]]" role="radio"
              icon="cr:folder-filled" title="[[chooseFileLabel]]">
          </iron-icon>
        </template>
        <!-- Shows and selects the current profile picture. -->
        <img id="profileImage" role="radio"
            data-type$="[[selectionTypesEnum_.PROFILE]]"
            data-url$="[[profileImageUrl_]]"
            src="[[getImgSrc_(profileImageUrl_)]]"
            hidden="[[!profileImageUrl_]]"
            srcset="[[getImgSrc2x_(profileImageUrl_)]]"
            title="[[profileImageLabel]]">
        <!-- Shows and selects the previously selected ('old') picture. -->
        <img id="oldImage" role="radio"
            data-type$="[[selectionTypesEnum_.OLD]]"
            data-url$="[[oldImageUrl_]]"
            src="[[getImgSrc_(oldImageUrl_)]]" hidden="[[!oldImageUrl_]]"
            title="[[oldImageLabel]]">
        <!-- Shows the list of available images to select from. -->
        <template is="dom-repeat" items="[[defaultImages]]">
          <img role="radio"
              data-type$="[[selectionTypesEnum_.DEFAULT]]"
              data-index$="[[index]]" data-image-index$="[[item.index]]"
              data-url$="[[item.url]]"
              src="[[getImgSrc_(item.url)]]"
              srcset="[[getImgSrc2x_(item.url)]]" title="[[item.title]]">
        </template>
      </iron-selector>
    </div>
